<template>
    <div class="sjzxLeftFxffForm">
        <div class="listTitle">
            {{ $store.state.fxffFormCheckedContent.type }}列表
        </div>
        <el-row>
            <el-col :span="8" v-if="$store.state.userRegion=='海南省'">
                 <el-select v-model="cityValue" placeholder="请选择市县">
                    <el-option
                        v-for="item in cityOptions"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="12">
                <el-input placeholder="请输入名称，地址" v-model="inputVal">
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button icon="el-icon-search" @click="zySearch"></el-button>
            </el-col>
        </el-row>
        
        <div class="resultNum">查询结果：共{{ totalNum }}条记录</div>
        <div class="dataList">
            <div
                class="dataListItem"
                v-for="(item, index) in dataList"
                :key="item"
            >
                <div class="itemTop">
                    <span class="order">{{ orderList[index] + 1 }}、</span>
                    <span class="itemName">{{ item.name }}</span>
                </div>
                <div class="link">
                    <span class="linkPro">联系人：</span>
                    <span class="linkContent"
                        >{{ item.charge }}。联系电话：{{ item.phone }}</span
                    >
                </div>
                <div class="itemBottom" @click="flyTo(item)">
                    <span
                        class="locationIcon el-icon-location-information"
                    ></span>
                    <span class="location">地址：{{ item.address }}</span>
                    <span class="showQJ" v-if="item.qjt" @click="showQJ(item.qjt)">查看全景</span>
                </div>
            </div>
        </div>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :pager-count="5"
            :total="totalNum"
        >
        </el-pagination>
        <div  class="exportExcel" @click="exportExcel">报表生成</div>
    </div>
</template>

<script>
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import Title from "../LittleTitle.vue";
import echarts from "echarts";
import axios from "axios";

export default {
    components: {
        Title,
    },
    setup() {
        let inputVal = ref("");
        let currentPage = ref(1);
        let store = useStore();
        let activeName = ref("second");
        let totalNum = ref(0);
        let tabsList = ref([]);
        let echartsUrl = ref([]);
        let dataList = ref([]);
        //搜索地址
        let searchUrl = ref("");
        //每一页序号
        let orderList = ref([]);
        //报表导出列表
        let exportUrl = ref("");
        //下拉框
        let cityValue = ref("");
        let cityOptions = ref([]);
        const userRegion = computed(() => {
            return store.state.userRegion;
        });
        //默认执行一次监听，渲染echarts 以及列表
        watch(
            () => store.state.fxffFormCheckedContent,
            (newValue) => {
                console.log(newValue)
                //tab切换列表
                tabsList.value = newValue.echarts;
                //echarts数据 地址 列表
                echartsUrl.value = JSON.parse(newValue.item.kbApiDistribution);
                //tab页默认显示第一个列表
                activeName.value = newValue.echarts[0];
                //获取报表输出url
                exportUrl.value = newValue.item.kbApiDownload;
                searchUrl.value = newValue.item.kbApiCondition;
                //默认搜索全部数据
                let listUrl = `${sjzxUrl}${searchUrl.value}?current=1&size=10&division=${cityValue.value}&condition=${inputVal.value}`
                if (userRegion.value == "海南省") {
                    
                } else {
                    listUrl = `${sjzxUrl}${searchUrl.value}?current=1&size=10&addvcd=${window.regionCode[userRegion.value]}&condition=${inputVal.value}`
                }
                axios
                    .get(
                        listUrl
                    )
                    .then((res) => {
                        console.log(res.data);
                        totalNum.value = res.data.data.total;
                        console.log(res.data.data.total);
                        dataList.value = res.data.data.records;
                        orderList.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                    });
                //获取市县列表
                let typeNum = {
                    "水库":146,
                    "地质灾害隐患点":147, 
                    "漫水桥(路)":148,
                    "危房":149,
                    "旅游景区景点":150, 
                    "易淹易涝点(区)":151,
                    "渔船":152, 
                    "渔港":153,
                    "塔吊":154, 
                    "其他":155, 
                    "三防责任人信息":156
                }
                axios.get(`${sjzxUrl}/api/v2/sanFang/getAdministrativeDivision?sign=${typeNum[newValue.type]}`).then((res)=>{
                   cityOptions.value = res.data.data
                   cityOptions.value.unshift("全部")
                })
            },
            { immediate: true }
        );
        const flyTo = (point) => {
            console.log(point)
            
            let x = null
            let y = null
            if (point.lon && point.lat) {
                x = point.lon
                y = point.lat
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        parseFloat(x),
                        parseFloat(y),
                        8000
                    ),
                });
            } else if (point.lng && point.lat) {
                x = point.lng
                y = point.lat
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        parseFloat(x),
                        parseFloat(y),
                        8000
                    ),
                });
            } else if (point.jd && point.wd) {
                x = point.jd
                y = point.wd
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        parseFloat(x),
                        parseFloat(y),
                        8000
                    ),
                });
            }
            
        };
        //生成连续数字
        const progressiveArray = (start, end) => {
            start = Number(start);
            end = Number(end);
            end = end > start ? end : start;
            return [...Array(end + 1).keys()].slice(start);
        };  
        //点击各个页码的方法
        let pageSize = 10;
        const handleCurrentChange = (currentPage) => {
            let from = (currentPage - 1) * pageSize;
            let to = currentPage * pageSize;
            axios
                .get(
                    `${sjzxUrl}${searchUrl.value}?current=${currentPage}&size=10&division=${cityValue.value=="全部"?'':cityValue.value}&condition=${inputVal.value}`
                )
                .then((res) => {
                    totalNum.value = res.data.data.total;
                    dataList.value = res.data.data.records;
                    orderList.value = progressiveArray(from, to);
                   
                });
        };
        //搜索按钮
        const zySearch = () => {
            axios
                .get(
                    `${sjzxUrl}${searchUrl.value}?current=1&size=10&division=${cityValue.value=="全部"?'':cityValue.value}&condition=${inputVal.value}`
                )
                .then((res) => {
                    totalNum.value = res.data.data.total;
                    dataList.value = res.data.data.records;
                    orderList.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                });
        };
        const handleSizeChange = (size) => {};
        const exportExcel = () => {
            window.open(
                `${sjzxUrl}${exportUrl.value}?division=${cityValue.value=="全部"?'':cityValue.value}&condition=${inputVal.value}`
            );
        };
        const showQJ = (qjt)=>{
            //store.commit("changePsvUrl",`/qj/panoramagram/${qjt}`)
            store.commit("changePsvUrl",`https://59.212.147.69:8889/panoramagram/${qjt}`)
        }
        onMounted(() => {
           
        });
        return {
            //下拉框
            cityValue,
            cityOptions,
            //搜索框
            inputVal,
            //页数变化，翻页
            totalNum,
            orderList,
            currentPage,
            handleSizeChange,
            handleCurrentChange,
            //数据列表
            dataList,
            //导出报表方法
            exportExcel,
            zySearch,
            flyTo,
            //显示全景按钮
            showQJ

        };
    },
};
</script>

<style>
.sjzxLeftFxffForm .el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
    color: #000;
}
</style>
<style lang="stylus" >
 ;

.sjzxLeftFxffForm {
    width:vw(400);
    height:vh(965);
    padding:vh(15) vw(15); 
    color: #fff;
    .el-button{
        background:transparent;
        border:1px solid #00EAFF;
        color:#fff;
    }
    .listTitle {
        width:80%;
        margin: vh(5) auto;
        height: vh(30);
        line-height: vh(30);
        padding-bottom: vh(40);
        font-size: vw(20);
        text-align: center;
        font-family: 'Source Han Serif SC, Source Han Serif SC-Heavy';
        font-weight: 800;
        border-bottom:2px solid #18485d;
        margin-bottom:vh(25)
    }

    .el-tabs__header {
        width: vw(350);
        margin: 0 0 vh(18);
        margin-top: vh(18);
        z-index: 19;

        .el-tabs__nav-wrap {
            height: vh(30);
            line-height: vh(30);
            // min-width: vw1(2000);
            background: rgba(4, 34, 45, 0.37);

            .el-tabs__nav-prev, .el-tabs__nav-next {
                line-height: vh(30);
                color: #fff;
                font-size: vw(16);
            }

            .el-tabs__item {
                height: vh(30);
                min-width: vw(170);
                color: #fff;
                line-height: vh(30);
                font-size: vw(16);
                text-align: center;
            }

            .el-tabs__item.is-active {
            }

            .el-tabs__active-bar {
                width: vw(10);
                background-color: #26cffe;
            }

            &::after {
                visibility: hidden;
                // background-color: none;
            }
        }
    }

    .el-tabs__content {
        z-index: 19;
        position: relative;
        width: vw(350);
        height: vh(230);

        .button-box {
            position: absolute;
            right: 0;
            top: vh(10);

            span {
                width: vw(40);
                background: #023245;
                display: inline-block;
                height: vw(40);
                line-height: vh(40);
                text-align: center;
                margin-right: vw(20);
                font-size: vw(30);
                color: #5cecff;
                cursor: pointer;
                border-radius: vw(6);
                pointer-events: all;
            }
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .resultNum {
        margin-top: vh(10);
        margin-bottom: vh(10);
    }

    .exportExcel {
        width: vw(100);
        height: vh(30);
        line-height: vh(30);
        border: 1px solid #00EAFF;
        text-align: center;
        border-radius: 3px;
        float: right;
        margin-top: vh(20);
    }

    .el-input__inner {
        background: transparent;
        border: 1px solid #00E5FD;
    }

    .el-input-group__append, .el-input-group__prepend {
        background: transparent;
        border: 1px solid #00E5FD;
    }

    #themePicFxffChart0 {
        width: vw(330);
        height: vh(250);
    }

    #themePicFxffChart1 {
        width: vw(330);
        height: vh(220);
    }

    #themePicFxffChart2 {
        width: vw(330);
        height: vh(220);
    }

    .dataList {
        overflow-y: scroll;
        margin-bottom: vh(20);
        height:vh(680);
        .dataListItem {
            padding-bottom: vh(10);
            padding-top: vh(10);
            border-bottom: 1px solid #ddd;

            .itemTop {
                .order {
                    display: inline-block;
                    min-width: vw(20);
                    height: vh(20);
                    margin-right: vw(10);
                    text-align: center;
                    background: #00EAFF;
                    font-size: vw(16);
                    line-height: vh(20);
                    color: #000;
                }

                .itemName {
                    font-size: vw(16);
                    height: vh(20);
                    line-height: vh(20);
                }
            }

            .link {
                .linkPro {
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }

                .linkContent {
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }
            }

            .itemBottom {
                .locationIcon {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }

                .location {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }
            }
        }
    }
}
</style>